<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Traveler Blog --> 做一个孤独的旅行者，发现存在的意义</title>
    <link href="/client/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/client/css/style.css" type="text/css" rel="stylesheet">
    <link type="text/css" href="/client/css/nprogress.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="/client/js/html5shiv.min.js" type="text/javascript"></script>
    <script src="/client/js/respond.min.js" type="text/javascript"></script>
    <script src="/client/js/selectivizr-min.js" type="text/javascript"></script>
    <![endif]-->
    <link rel="shortcut icon" href="/client/images/tou.ico">
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript">
        //判断浏览器是否支持HTML5
        window.onload = function() {
            if (!window.applicationCache) {
                window.location.href="/client/ie.html";
            }
        }
    </script>
</head>

<body>
<section class="container user-select">
    <jsp:include page="head.jsp"/>
    <!--/超小屏幕可见-->
    <div class="content-wrap"><!--内容-->
        <div class="content">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!--banner-->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <!--/banner-->

            <div class="content-block new-content">
                <h2 class="title"><strong>查询结果</strong></h2>
                <div class="row">
                    <c:forEach items="${searchList}" var="p">
                        <div class="news-list">
                            <input type="hidden" name="pid" value="${p.pid}">
                            <div class="col-xs-5 col-sm-5 col-md-4">
                                <img name="img" src="${p.img}" alt="" height="124px">
                            </div>
                            <div class="news-info col-xs-7 col-sm-7 col-md-8">
                                <dl>
                                    <dt> <a href="/artile/findById.do?pid=${p.pid}" name="title" > ${p.title} </a> </dt>
                                    <dd>
                                        <span class="name" name="author">${p.author}  </span>
                                        <span class="time" name="time"><fmt:formatDate value="${p.time}" pattern="yyyy-MM-dd"/></span>
                                    </dd>
                                    <dd class="text" name="page" style="overflow: hidden;height: 32px">${p.page}</dd>
                                </dl>
                                <div class="news_bot col-sm-7 col-md-8">
                                <span class="tags visible-lg visible-md">
                                    <a href="/artile/findByTags.do?currentPage=1&tags=${p.tags}" name="tags">${p.tags}</a>
                                </span>
                                    <span class="look"> 共 <strong name="click">${p.click}</strong> 人围观，发现 <strong name="comment"> ${p.comment} </strong> 个不明物体 </span>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>

                <div class="container">
                    <div class="row clearfix" style="margin-left: 250px">
                        <div class="col-md-12 column">
                            <ul class="pagination">
                                <c:choose>
                                    <c:when test="${pageInfo.pageNum==1}">
                                        <li class="disabled">
                                            <a href="#">上一页</a>
                                        </li>
                                    </c:when>
                                    <c:otherwise>
                                        <li>
                                            <a href="/artile/search.do?currentPage=${pageInfo.pageNum-1}&search=${search}">上一页</a>
                                        </li>
                                    </c:otherwise>
                                </c:choose>
                                <c:forEach begin="1" end="${pageInfo.pages}" var="q">
                                    <c:choose>
                                        <c:when test="${pageInfo.pageNum == q}">
                                            <li class="active">
                                                <a href="#">${q}</a>
                                            </li>
                                        </c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="/artile/search.do?currentPage=${q}&search=${search}">${q}</a>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                                <c:choose>
                                    <c:when test="${pageInfo.pageNum == pageInfo.pages}">
                                        <li class="disabled">
                                            <a href="#">下一页</a>
                                        </li>
                                    </c:when>
                                    <c:otherwise>
                                        <li>
                                            <a href="/artile/search.do?currentPage=${pageInfo.pageNum+1}&search=${search}">下一页</a>
                                        </li>
                                    </c:otherwise>
                                </c:choose>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/内容-->
    <aside class="sidebar visible-lg"><!--右侧>992px显示-->
        <jsp:include page="/client/user.jsp"/>
        <div class="sentence"> <strong>每日一句</strong>
            <h2 id="time"></h2>
            <p>你是我人生中唯一的主角，我却只能是你故事中的一晃而过得路人甲。</p>
        </div>
        <div class="sentence"> <strong>每日天气</strong>
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=2&num=1" width="220" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
        <div id="search" class="sidebar-block search" role="search">
            <h2 class="title"><strong>搜索</strong></h2>
            <form class="navbar-form" action="/artile/search.do?currentPage=1" method="post">
                <div class="input-group">
                    <input type="text" class="form-control" size="35" value="${search}" name="search">
                    <span class="input-group-btn">
          <button class="btn btn-default btn-search" type="submit">搜索</button>
          </span> </div>
            </form>
        </div>
        <jsp:include page="/client/commands.jsp"/>
        <div class="sidebar-block comment">
            <h2 class="title"><strong>最新评论</strong></h2>
            <ul>
                <c:forEach items="${commentssList}" var="com">
                    <li data-toggle="tooltip" data-placement="top" title="${com.user.username}的评论">
                        <a>
                        <span class="face">
                            <img src="/client/images/icon/icon.png" alt="">
                        </span>
                            <span class="text"><strong>${com.user.username}</strong> (<fmt:formatDate value="${com.ctime}" pattern="yyyy-MM-dd"/>) 说：<br />
                            ${com.cpage}
                        </span>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </aside>
    <!--/右侧>992px显示-->
    <footer class="footer">POWERED BY &copy;<a href="#">个人技术博客 XXXXX.COM</a> ALL RIGHTS RESERVED &nbsp;&nbsp;&nbsp;<span>
        <a href="http://www.mycodes.net/" target="_blank">源码之家</a></span>
        <span style="display:none"><a href="">网站统计</a></span> </footer>
</section>
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div>
<!--/返回顶部-->
<script src="/client/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/client/js/nprogress.js" type="text/javascript" ></script>
<script src="/client/js/bootstrap.min.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function() {
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        // var h = myDate.getHours();//获取当前小时数(0-23)
        // var m = myDate.getMinutes();//获取当前分钟数(0-59)
        // var s = myDate.getSeconds();//获取当前秒
        var week = myDate.getDay();
        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        console.log(year, mon, date, weeks[week])
        $("#time").html(year + "年" + mon + "月" + date + "日" + weeks[week]);
    })
</script>
<script type="text/javascript">
    //页面加载
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
    //返回顶部按钮
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $(".gotop").fadeIn();
            }
            else{
                $(".gotop").hide();
            }
        });
        $(".gotop").click(function(){
            $('html,body').animate({'scrollTop':0},500);
        });
    });
    //提示插件启用
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
    //鼠标滑过显示 滑离隐藏
    $(function(){
        $(".carousel").hover(function(){
            $(this).find(".carousel-control").show();
        },function(){
            $(this).find(".carousel-control").hide();
        });
    });
    $(function(){
        $(".hot-content ul li").hover(function(){
            $(this).find("h3").show();
        },function(){
            $(this).find("h3").hide();
        });
    });
    //页面元素智能定位
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
            var pos = element.css("position"); //当前元素距离页面document顶部的距离
            $(window).scroll(function() { //侦听滚动时
                var scrolls = $(this).scrollTop();
                if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                    if (window.XMLHttpRequest) { //如果不是ie6
                        element.css({ //设置css
                            position: "fixed", //固定定位,即不再跟随滚动
                            top: 0 //距离页面顶部为0
                        }).addClass("shadow"); //加上阴影样式.shadow
                    } else { //如果是ie6
                        element.css({
                            top: scrolls  //与页面顶部距离
                        });
                    }
                }else {
                    element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
                        position: pos,
                        top: top
                    }).removeClass("shadow");//移除阴影样式.shadow
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //启用页面元素智能定位
    $(function(){
        $("#search").smartFloat();
    });
    //异步加载更多内容
    jQuery("#pagination a").on("click", function ()
    {
        var _url = jQuery(this).attr("href");
        var _text = jQuery(this).text();
        jQuery(this).attr("href", "javascript:void(0);");
        jQuery.ajax(
            {
                type : "POST",
                url : _url,
                success : function (data)
                {
                    //将返回的数据进行处理，挑选出class是news-list的内容块
                    result = jQuery(data).find(".row .news-list");
                    //newHref获取返回的内容中的下一页的链接地址
                    nextHref = jQuery(data).find("#pagination a").attr("href");
                    jQuery(this).attr("href", _url);
                    if (nextHref != undefined)
                    {
                        jQuery("#pagination a").attr("href", nextHref);
                    }
                    else
                    {
                        jQuery("#pagination a").html("下一页没有了").removeAttr("href")
                    }
                    // 渐显新内容
                    jQuery(function ()
                    {
                        jQuery(".row").append(result.fadeIn(300));
                        jQuery("img").lazyload(
                            {
                                effect : "fadeIn"
                            });
                    });
                }
            });
        return false;
    });
</script>
</body>
</html>
